import React from 'react'
import { HashRouter, Route, Link } from 'react-router-dom'

// 导入antd组件
import { Layout, Menu } from 'antd';
const { Header, Content, Footer } = Layout;
import 'antd/dist/antd.css';

// 导入样式
import styles from "./css/app.scss"

// 导入路由相关组件页面
import Home from './components/home/Home.jsx'
import Goods from './components/goods/Goods.jsx'
import About from './components/about/About.jsx'

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    componentDidMount(){
       
    }
    render() {
        return <HashRouter>
            <Layout className="layout" style={{ height: '100%' }}>
                <Header>
                    <div className={styles.logo} />
                    <Menu theme="dark" mode="horizontal" defaultSelectedKeys={window.location.hash.split('/')[1]==''?['home']:[window.location.hash.split('/')[1]]}>
                        <Menu.Item key="home">
                            <Link to='/home'>首页</Link>
                        </Menu.Item>
                        <Menu.Item key="goods">
                            <Link to='/goods/427/1'>商品</Link>
                        </Menu.Item>
                        <Menu.Item key="about">
                            <Link to='/about'>关于</Link>
                        </Menu.Item>
                    </Menu>
                </Header>
                <Content  style={{background:"#fff",height:'100%'}}>
                    <Route path='/home' component={Home}></Route>
                    <Route path='/goods' component={Goods}></Route>
                    <Route path='/about' component={About}></Route>
                </Content>
                <Footer style={{ textAlign: 'center' }}>小洲商城 ©2020 Created by longteng</Footer>
            </Layout>
        </HashRouter>

    }
}